<div class="container-fluid container-cards-pf" ng-controller="hwk.triggersController">

  <!-- TOAST NOTIFICATIONS -->

  <pf-notification-list></pf-notification-list>

  <!-- Toolbar -->
  <div class="row toolbar-pf" id="toolbar" ng-show="selectedTenant != null && selectedTenant != ''">
    <div class="col-md-12">
      <form class="toolbar-pf-actions" ng-submit="updateFilter()">
        <div class="form-group toolbar-pf-filter">
          <div class="input-group">
            <div class="input-group-btn">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Tag Query <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li class="selected"><a href="#/triggers">Tag Query</a></li>
              </ul>
            </div>
            <input type="text" class="form-control" ng-model="filter.tags" id="filter.tags" placeholder="Filter By Tag Query..." />
          </div>
        </div>
        <div class="form-group">
          <div class="dropdown btn-group  dropdown-kebab-pf">
            <button class="btn btn-link dropdown-toggle" type="button" id="triggersKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span class="fa fa-ellipsis-v"></span>
            </button>
            <ul class="dropdown-menu " aria-labelledby="triggersKebab">
              <li ng-click="newTriggerModal()"><a>New Trigger</a></li>
            </ul>
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- List -->
  <div class="row" ng-show="selectedTenant != null && selectedTenant != ''">
    <div class="list-group list-view-pf list-view-pf-view">
      <div class="list-group-item" ng-repeat="t in triggers | startFrom: (pageNumber - 1) * pageSize | limitTo: (pageSize ? pageSize : 5)">
        <div class="list-view-pf-actions">
          <div class="dropdown pull-right dropdown-kebab-pf">
            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <span class="fa fa-ellipsis-v"></span>
            </button>
            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight15">
              <li ng-click="enableTriggers(t.trigger.id, true)"><a>Enable</a></li>
              <li ng-click="enableTriggers(t.trigger.id, false)"><a>Disable</a></li>
              <li role="separator" class="divider"></li>
              <li ng-click="viewTriggerModal(t)"><a>View</a></li>
              <li ng-click="editTriggerModal(t.trigger.id, t)"><a>Edit</a></li>
              <li ng-click="deleteTrigger(t.trigger.id)"><a>Delete</a></li>
            </ul>
          </div>
        </div>
        <div class="list-view-pf-main-info">
          <div class="list-view-pf-left">
            <span class="fa fa-flash list-view-pf-icon"></span>
          </div>
          <div class="list-view-pf-body">
            <div class="list-view-pf-description-25">
              <div class="list-group-item-heading">
                {{ t.trigger.name }} <small>{{ t.trigger.description }}</small> <small>Id: {{ t.trigger.id }}</small> <small>Enabled: {{ t.trigger.enabled }}</small>
              </div>
            </div>
            <div class="list-view-pf-additional-info">
              <div class="list-view-pf-additional-info-item">
                <dl>
                  <dt>Fires when</dt>
                  <dt ng-repeat-start="c in t.conditions"></dt>
                  <dd ng-show="c.triggerMode == 'FIRING'" ng-repeat-end>
                    <div>{{ c.displayString }}</div>
                  </dd>
                  <dt ng-show="t.trigger.autoResolve">Resolves when</dt>
                  <dt ng-repeat-start="c in t.conditions"></dt>
                  <dd ng-show="c.triggerMode == 'AUTORESOLVE'" ng-repeat-end>
                    <div>{{ c.displayString }}</div>
                  </dd>
                </dl>
              </div>
              <div class="list-view-pf-additional-info-item" ng-show="t.trigger.actions != null">
                <dl class="dl-horizontal">
                  <dt>Actions</dt>
                  <dd></dd>
                  <dt ng-repeat-start="a in t.trigger.actions">
                    <span class="fa fa-envelope list-view-pf-icon-lg" ng-show="a.actionPlugin == 'email'"></span> <span class="fa fa-code list-view-pf-icon-lg"
                      ng-show="a.actionPlugin == 'webhook'"></span> <span class="fa fa-file-code-o list-view-pf-icon-lg" ng-show="a.actionPlugin == 'elasticsearch'"></span>
                  </dt>
                  <dd ng-repeat-end>{{ a.actionId }}</dd>
                </dl>
              </div>
              <div class="list-view-pf-additional-info-item" ng-show="t.trigger.tags != null">
                <dl class="dl-horizontal">
                  <dt>Tags</dt>
                  <dd></dd>
                  <dt ng-repeat-start="(key, value) in t.trigger.tags">{{ key }}:</dt>
                  <dd ng-repeat-end>{{ value }}</dd>
                </dl>
              </div>
              <div class="list-view-pf-additional-info-item">
                <dl class="dl-horizontal" ng-show="t.trigger.context != null">
                  <dt>Context</dt>
                  <dd></dd>
                  <dt ng-repeat-start="(key, value) in t.trigger.context">{{ key }}:</dt>
                  <dd ng-repeat-end>{{ value }}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Pagination -->
  <form class="form-inline" role="form" ng-show="selectedTenant != null && selectedTenant != ''">
    <div class="col-md-12">
      <div class="form-group">
        <input class="form-control pagination-pf-pagesize" type="text" ng-model="pageSize" /> <span> per page</span>
      </div>
      <div class="form-group pull-right">
        <ul class="pagination pagination-sm pagination-pf-controls">
          <li><a ng-click="pageNumber = 1"> <span class="i fa fa-angle-double-left"></span>
          </a></li>
          <li><a ng-click="pageNumber = pageNumber > 1 ? pageNumber - 1 : 1"> <span class="i fa fa-angle-left"></span>
          </a></li>
          <li><a ng-click="pageNumber = pageNumber < maxPages ? pageNumber + 1 : maxPages"> <span class="i fa fa-angle-right"></span>
          </a></li>
          <li><a ng-click="pageNumber = maxPages"> <span class="i fa fa-angle-double-right"></span>
          </a></li>
        </ul>
      </div>
      <div class="form-group pull-right pagination-pf-pages">
        <span><b>{{ fromItem }}-{{ toItem }} of {{ numTotalItems }}</b></span>
      </div>
    </div>
  </form>
  <!-- Select Tenant -->
  <div class="row row-cards-pf" ng-show="selectedTenant == null || selectedTenant == ''">
    <div class="col-md-12">
      <div class="card-pf">
        <div class="card-pf-heading">
          <p class="card-pf-heading-details"></p>
          <h2 class="card-pf-title">Select a Tenant</h2>
        </div>
        <div class="card-pf-body">Use the upper right form to select a tenant which fetch data from Hawkular Alerting.</div>
      </div>
    </div>
  </div>
</div>
<div ng-controller="hwk.triggersController">
  <script type="text/ng-template" id="jsonModal.html">
    <div class="modal-content modal-lg">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" ng-click="cancel()" aria-hidden="true">
          <span class="pficon pficon-close"></span>
        </button>
        <h4 class="modal-title">{{ jsonModal.title }}</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <div class="col-md-12">
              <textarea class="form-control textarea-resize" ng-model="jsonModal.json" ng-readonly="{{ jsonModal.readOnly }}" rows="20" placeholder="{{ jsonModal.placeholder }}" />
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" ng-show="{{ !jsonModal.readOnly }}" ng-disabled="!isValid()" ng-click="save()">Save</button>
      </div>
    </div>
  </script>
</div>
